<template>
  <div class="salarys">
    工资

    <SonA />
    <SonB />
    <button @click="$router.push('/salarys?id=' + Math.random())">
      更新路由
    </button>
  </div>
</template>

<script>
import SonA from './components/sona.vue'
import SonB from './components/sonb.vue'
export default {
  components: {
    SonA,
    SonB
  },

  // 进入路由之前 在beforecreated之前执行 拿不到this实例
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter:进入之前')
    next()
  },
  // 路由更新前执行 拿到的是更新的数据
  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate：更新之前')
    this.$nextTick(() => {
      console.log('beforeRouteUpdate', this.$route.query.id)
    })
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave:离开之前')
    next()
  }
}
</script>

<style lang="scss" scoped>
.salarys {
  display: flex;
}
</style>
